<template>
  <div class="bigbox">
    <!-- 头部 -->
    <Myheader>报修中心</Myheader>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading"
                      success-text="刷新成功"
                      @refresh="onRefresh">
      <!-- 已接单： -->
      <div class="task">
        <!-- tab页面 -->
        <van-tabs v-model="active"
                  @change="checkTab"
                  sticky
                  animated>
          <van-tab title="tab1">
            <!-- 待维修 -->
            <div class="examine">
              <div class="examine-titile">
                tab1
              </div>
              <div>
                内容1...
              </div>
            </div>
          </van-tab>
          <van-tab title="tab2">
            <div class="examine">
              <div class="examine-titile">
                tab2
              </div>
              <div>
                内容2...
              </div>
            </div>
          </van-tab>
          <van-tab title="tab3">
            <div class="examine">
              <div class="examine-titile">
                tab3
              </div>
              <div>
                内容3...
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <!-- </div> -->
    </van-pull-refresh>
    <!-- 尾部 -->
    <Footer page="index"></Footer>
  </div>
</template>

<script>
import Myheader from '@/components/Myheader'
import Footer from '@/components/Footer'
// import mixin from '@/mixin/index'

export default {
  // mixins: [mixin],
  name: 'index',
  components: {
    Myheader,
    Footer
  },
  mounted() {
    // 个人信息初始化
    this.initUserInfo()
    // 列表初始化
    this.initListInfo()
  },
  data() {
    return {
      active: 0, // 当前的tab
      username: '', // 姓名
      isLoading: false // 下拉刷新
    }
  },
  methods: {
    // 个人信息初始化
    initUserInfo() {
      this.username = this.$cookies.get('totalInfo').UserInfo.UserName
    },
    // 列表初始化
    initListInfo() {
      // 判断tab是否存在缓存
      if (this.$store.state.active) {
        this.active = this.$store.state.active
        this.getInfoListData()
        return
      }
      // 初始化tab1
      this.getTab1()
    },
    // 监听tab页变化
    checkTab() {
      // 请求数据
      this.getInfoListData()
      // 缓存
      this.$store.commit('updateActive', this.active)
    },
    // 根据active请求对应数据
    getInfoListData() {
      switch (this.active) {
        case 1:
          //请求tab1数据
          this.getTab1()
          break
        case 2:
          //请求tab2数据
          this.getTab2()
          break
        default:
          //请求tab3数据
          this.getTab3()
      }
    },
    //请求tab1数据
    getTab1() {
      // ...
    },
    //请求tab2数据
    getTab2() {
      // ...
    },
    //请求tab3数据
    getTab3() {
      // ...
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        // 初始化
        this.$router.go(0)
        this.isLoading = false
      }, 1000)
    },
    // 退出登录
    logout() {
      // 退出提示
      this.$Dialog({
        title: '提示',
        message: '是否退出登录?'
      })
        .then(() => {
          // on confirm
          // 清理缓存
          this.$cookies.remove('totalInfo')
          this.$store.commit('updateToken', null)
          this.$store.commit('updateActive', null)
          // 跳转
          this.$router.push('/login')
        })
        .catch(err => {
          // on cancel
          console.log(err)
        })
      // 清空缓存
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>